<template>
	<view>
		<view class="head-nav">
			<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">待接单</view>
			<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">待取货</view>
			<view :class="navIndex==3?'activite':''" @click="checkIndex(3)">配送中</view>
			<view :class="navIndex==4?'activite':''" @click="checkIndex(4)">已完成</view>
			<view :class="navIndex==5?'activite':''" @click="checkIndex(5)">异常</view>
		</view>
		<view class="content" v-if="navIndex==1">
			<view class="item1">
				<image src="../../static/left.png"></image>
				<text style="margin-left: 20rpx;">{{username}}</text>
				<text style="margin-left: 346rpx;">等待骑手接单</text>
			</view>
			<view class="item2">
				<text>{{juli}} | {{location}}</text>
			</view>
			<view class="item3">
				<image src="../../static/meat.png"></image>
				<view class="product-info">
					<text style="font-size: 24rpx;color: #1A1A1A;">{{product}}</text>
					<text style="font-size: 20rpx;color: #666666;">规格:规格一</text>
					<text style="font-size: 20rpx;color: #1A1A1A;">￥{{price}} x1</text>
				</view>
				<text style="font-size: 20rpx;color: #1A1A1A; margin-left: 213rpx; margin-top: 60rpx;">
					共{{total}}件 展开</text>
			</view>
			<view class="item4">
				<text>本单预计收入</text>
				<text>￥{{totalprice}}</text>
			</view>
			<view class="item5">
				<text>客户实际支付</text>
				<text>￥{{totalprice}}</text>
			</view>
		</view>
	    <view class="content2" v-if="navIndex==2">骑手已到店</view>
		<view class="content3" v-if="navIndex==3">骑手配送中</view>
		<view class="content4" v-if="navIndex==4">已送达</view>
		<view class="content5" v-if="navIndex==5">已送达</view>
	</view>
</template>
<script>
export default {
	data(){
		return {
		  navIndex:1,
		  username: '张三三',
		  juli:"1.2km",
		  location:"成都市青羊区天府三街205号",
		  product:"带皮五花肉（300g）",
		  price: 14.40,
		  total: 3,
		  totalprice:44.40
		}
	},
	methods:{
		checkIndex(index){
			this.navIndex = index
		}
	},
	onLoad(){
		uni.setNavigationBarTitle({
		 
		})
	}
}
</script>
<style>
	page {
	  background: rgb(245, 245, 245);
	}
	.head-nav {
	  width: 670rpx;
	  height: 80rpx;
	  line-height: 80rpx;
	  padding: 0rpx 48rpx 0rpx 32rpx;
	  background: #FFFFFF;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	}
	.activite {
	  font-weight: bold;
	  border-bottom: 6rpx solid #FEB140;
	}
	.content {
	  width: 690rpx;
	/*  height: 400rpx; */
	  background: #FFFFFF;
	  border-radius: 10rpx;
	  margin: 30rpx;
	}
	.item1 {
	  padding: 20rpx;
	  display: flex;
	  align-items: center;
	  font-size: 26rpx;
	  font-weight: bold;
	  font-family: Alibaba PuHuiTi;
	  color: #1A1A1A;
	}
	.item1 image {
	  width: 40rpx;
	  height: 40rpx;
	}
	.item2 {
	  margin-left: 20rpx;
	  font-size: 20rpx;
	  color: #666666;
	}
	.item3 {
	  display: flex;
	  flex-direction: row;
	  margin: 30rpx 20rpx;
	}
	.item3 image {
	  width: 80rpx;
	  height: 80rpx;
	}
	.product-info {
	  display: flex;
	  flex-direction: column;
	  font-family: Alibaba PuHuiTi;
	  font-weight: 400;
	  margin-left: 20rpx;
	  justify-content: flex-start;
	}
	.item4, .item5 {
	  margin: 20rpx;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  font-size: 26rpx;
	  color: #1A1A1A;
	  font-weight: bold;
	}
	</style>
